import React, { Children, useState } from 'react';
import logo from '../../assets/image/app/v2.jpg';
import { Outlet, useNavigate } from 'react-router-dom';
import {
	FundFilled,
	RocketFilled,
	TruckFilled,
	HomeFilled,
	AccountBookFilled,
	SignalFilled,
	FileTextFilled,
	SettingFilled
} from '@ant-design/icons';

export default function index() {
	const nav = useNavigate();

	const tabList = [
		{
			id: 1,
			name: '工作台',
			icon: <FundFilled style={{ fontSize: 20, color: '#fff' }} />,
			children: [
				{ id: 1_1, name: '我的工作台', path: '/workbench/myWorkbench' },
				{ id: 1_2, name: '库存查询', path: '/workbench/stockCheck' },
				{ id: 1_3, name: '库存预警' },
				{ id: 1_4, name: '销售订单' },
				{ id: 1_5, name: '销售出库' },
				{ id: 1_6, name: '销售退货单' },
				{ id: 1_7, name: '销售退货入库' },
				{ id: 1_8, name: '采购单' },
				{ id: 1_9, name: '采购退货单' },
				{ id: 1_10, name: '报损' },
				{ id: 1_11, name: '库存调拨' },
				{ id: 1_12, name: '库存盘点' }
			]
		},
		{
            id: 2,
            name: '销售',
            icon: <RocketFilled style={{ fontSize: 25, color: '#fff' }} />,
            children: [
                { id: 2_1, name: '销售订单', path: '/sales/salesOrder', },
                { id: 2_2, name: '销售出库', path: '/sales/salesOutbound', },
                { id: 2_3, name: '销售退货单', path: '/sales/salesReturnOrder' },
                { id: 2_4, name: '销售退货入库', path: '/sales/salesLnbound', },
                { id: 2_5, name: '销售明细', path: '/sales/salesDetails', },
                { id: 2_6, name: '品类明细', path: '/sales/categoryDetails', },
                { id: 2_7, name: '商品明细', path: '/sales/productDetails', },
                { id: 2_8, name: '客户明细', path: '/sales/customerDetails', }
            ]
        },
		{
			id: 3,
			name: '采购',
			icon: <TruckFilled style={{ fontSize: 25, color: '#fff' }} />,
			children: [
				{ id: 3_1, name: '采购', path: '/purchase' },
				{ id: 3_2, name: '采购单', path: '/purchase/purchasorder' },
				{ id: 3_3, name: '采购退货单', path: '/purchase/purchasereturnrorm' },
				{ id: 3_4, name: '采购入库', path: '/purchase/procurementandwarehousing' },
				{ id: 3_5, name: '采购退货出库', path: '/purchase/purchasereturnsandshipments' },
				{ id: 3_6, name: '采购数据', path: '/purchase/procurementdata' },
				{ id: 3_7, name: '商品采购统计', path: '/purchase/productpurchasingstatistics' },
				{ id: 3_8, name: '供应商供货统计', path: '/purchase/suppliersupplystatistics' },
				{ id: 3_9, name: '采购时效统计', path: '/purchase/procurementtimelinessstatistics' },
			]
		},
		{
			id: 4,
			name: '仓库',
			icon: <HomeFilled style={{ fontSize: 20, color: '#fff' }} />,
			children: [
				{
					id: 4_1,
					name: '仓库管理',
					path: '/Warehousing/WarehouseManagement'
				},
				{
					id: 4_2,
					name: '初期库存',
					path: '/Warehousing/InitialInventory'
				},
				{
					id: 4_3,
					name: '库存流水',
					path: '/Warehousing/InventoryFlow'
				},
				{
					id: 4_4,
					name: '库位查询',
					path: '/Warehousing/LocationQuery'
				},
				{
					id: 4_5,
					name: '库存预警',
					path: '/Warehousing/InventoryAlert'
				},
				{
					id: 4_6,
					name: '库位盘点',
					path: '/Warehousing/LocationInventoryCount'
				},
				{
					id: 4_7,
					name: '报损',
					path: '/Warehousing/DamageReport'
				},

				{
					id: 4_8,
					name: '库存调拨',
					path: '/Warehousing/InventoryAdjustment'
				},
				{
					id: 4_9,
					name: '出库',
					path: '/Warehousing/Outbound'
				},
				{
					id: 4_10,
					name: '出库明细',
					path: '/Warehousing/OutboundDetails'
				},
				{
					id: 4_11,
					name: '入库',
					path: '/Warehousing/Inbound'
				},
				{
					id: 4_12,
					name: '入库明细',
					path: '/Warehousing/InboundDetails'
				}
			]
		},
		{
			id: 5,
			name: '财务',
			icon: <AccountBookFilled style={{ fontSize: 20, color: '#fff' }} />,
			children: [{ id: 1, name: '子路由' }]
		},
		{
			id: 6,
			name: '报表',
			icon: <SignalFilled style={{ fontSize: 20, color: '#fff' }} />,
			children: [{ id: 1, name: '子路由' }]
		},
		{
			id: 7,
			name: '信息库',
			icon: <FileTextFilled style={{ fontSize: 20, color: '#fff' }} />,
			children: [{ id: 1, name: '子路由' }]
		},
		{
			id: 8,
			name: '设置',
			icon: <SettingFilled style={{ fontSize: 20, color: '#fff' }} />,
			children: [{ id: 1, name: '子路由' }]
		}
	];

	const [activeTab, setActiveTab] = useState<number>(
		parseInt(sessionStorage.getItem('activeTab')!) || 1
	);
	const [hoverTab, setHoverTab] = useState(0);

	const [activeChildren, setActiveChildren] = useState<number>(
		parseInt(sessionStorage.getItem('activeChildren')!) || 1
	);
	const [hoverChildren, setHoverChildren] = useState(0);

	return (
		<div style={styles.box}>
			<div style={styles.box_left}>
				<div style={styles.logo}>
					<img style={styles.logo_img} src={logo} alt="logo" />
				</div>
				<div style={styles.tab}>
					{tabList.map(item => {
						return (
							<div
								key={item.id}
								style={{
									...(activeTab === item.id ? styles.tab_item_active : styles.tab_item),
									...(hoverTab === item.id ? styles.tab_item_hover : styles.tab_item)
								}}
								onClick={() => {
									sessionStorage.setItem('activeTab', item.id.toString());
									setActiveTab(item.id);
									setHoverTab(0);
								}}
								onMouseEnter={() => {
									if (activeTab !== item.id) {
										setHoverTab(item.id);
									}
								}}
								onMouseLeave={() => setHoverTab(0)}
							>
								{item.icon}
								<p style={styles.tab_item_name}>{item.name}</p>
							</div>
						);
					})}
				</div>
			</div>
			<div style={styles.box_center}>
				{tabList.map(item => {
					if (item.id === activeTab) {
						return item.children.map(child => {
							return (
								<div
									style={{
										...(activeChildren === child.id
											? styles.tab_item_child_active
											: styles.tab_item_child),
										...(hoverChildren === child.id
											? styles.tab_item_child_hover
											: styles.tab_item_child)
									}}
									key={child.id}
									onClick={() => {
										sessionStorage.setItem('activeChildren', child.id.toString());
										setActiveChildren(child.id), setHoverChildren(0);
										nav(child.path!);
									}}
									onMouseEnter={() => {
										if (activeChildren !== child.id) {
											setHoverChildren(child.id);
										}
									}}
									onMouseLeave={() => setHoverChildren(0)}
								>
									{child.name}
								</div>
							);
						});
					}
				})}
			</div>
			<div style={styles.box_right}>
				<div style={styles.box_right_top}></div>
				<div style={styles.box_right_bottom}>
					<Outlet></Outlet>
				</div>
			</div>
		</div>
	);
}

const items = {
	width: '100%',
	height: '70px',
	display: 'flex' as 'flex',
	flexDirection: 'column' as 'column',
	alignItems: 'center' as 'center',
	justifyContent: 'center' as 'center',
	cursor: 'pointer'
};

const child = {
	width: '90%',
	textIndent: '20px',
	margin: '3%',
	borderRadius: '2px',
	lineHeight: '40px',
	cursor: 'pointer'
};

const styles = {
	box: {
		width: '100vw',
		minWidth: '1400px',
		height: '100vh',
		display: 'flex'
	},
	box_left: {
		width: '70px',
		height: '100%',
		backgroundColor: '#232B40'
	},
	logo: {
		width: '100%',
		height: '70px',
		display: 'flex',
		justifyContent: 'center',
		alignItems: 'center',
		marginBottom: '20px'
	},
	logo_img: {
		width: '60%',
		height: '60%'
	},
	tab: {
		flex: 1
	},
	tab_item: {
		...items
	},
	tab_item_active: {
		...items,
		backgroundColor: '#1890FF'
	},
	tab_item_hover: {
		...items,
		backgroundColor: 'rgb(63,71,99)'
	},
	tab_item_name: {
		color: '#fff',
		marginTop: 10
	},
	box_center: {
		width: '160px',
		height: '100%',
		boxShadow: '2px 0px 5px #ccc',
		paddingTop: '50px',
		zIndex: 2
	},
	tab_item_child: {
		...child
	},
	tab_item_child_active: {
		...child,
		backgroundColor: '#DEEFFF',
		color: '#18AAFF'
	},
	tab_item_child_hover: {
		...child,

		backgroundColor: '#eee'
	},
	box_right: {
		flex: 1,
		backgroundColor: '#F4F4F4'
	},
	box_right_top: {
		width: '100%',
		height: '70px',
		boxShadow: '5px 2px 5px #ccc',
		marginBottom: '20px',
		backgroundColor: '#fff'
	},
	box_right_bottom: {
		height: 'calc(100% - 90px)',
		overflowY: 'auto' as any, // 允许纵向滚动
		// 隐藏默认滚动条
		scrollbarWidth: 'none' as any, // 对 Firefox 生效
		msOverflowStyle: 'none' as any // 对 IE 和 Edge 生效
	}
};
